<template>
  <div id="app">
    <div v-if="$route.meta.keepAlive">
      <div>
        <div style="width:100%;background-color: #409EFF; overflow: hidden;height: 80px">
            <span class="demonstration" style="float:left;padding-top:30px;color:white;margin-left:1%">
                网站首页
            </span>
          <span class="demonstration" style="float:right;padding-top:10px;margin-right:1%;height: 800px">
                <el-dropdown trigger="click">
                  <span class="el-dropdown-link" style="color:white">
                    admin<i class="el-icon-caret-bottom el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>个人信息</el-dropdown-item>
                    <el-dropdown-item>退出登录</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
            </span>
        </div>

        <div style="margin-top:1px" class="biankuang">
          <el-row :gutter="16">
            <el-col :span="4">
              <el-menu
                default-active="2"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                background-color="#ddd"
                text-color="#cf9236"
                active-text-color="#545c64"
                style="height: 800px"
                :default-openeds="[]">

                <el-submenu index="1">
                  <template slot="title">
                    <i class="el-icon-location"></i>
                    <span>商家信息管理</span>
                  </template>

                  <el-menu-item-group>
                    <el-menu-item index="1-1" @click="ShopInfo">商家信息列表</el-menu-item>
                    <el-menu-item index="1-2" @click="shopInsert">新增商家信息</el-menu-item>
                    <el-menu-item index="1-3">商家销售统计</el-menu-item>
                    <el-submenu index="1-4">
                      <template slot="title">商家意见管理</template>
                      <el-menu-item index="1-4-1">选项1</el-menu-item>
                    </el-submenu>
                  </el-menu-item-group>
                </el-submenu>

                <el-submenu index="2">
                  <template slot="title">
                    <i class="el-icon-location"></i>
                    <span>菜品操作</span>
                  </template>

                  <el-menu-item-group>
                    <el-menu-item index="2-1" @click="goTo('/FoodsList')">菜品展示</el-menu-item>
                    <el-menu-item index="2-2" @click="goTo('/FoodAdd')">菜品添加</el-menu-item>
                    <el-menu-item index="2-3" @click="goTo('/CategoryList')">菜品种类展示</el-menu-item>
                    <el-menu-item index="2-4" @click="goTo('/CategoryAdd')">菜品种类添加</el-menu-item>
                  </el-menu-item-group>
                </el-submenu>

                <el-submenu index="3">
                  <template slot="title">
                    <i class="el-icon-location"></i>
                    <span>用户管理</span>
                  </template>

                  <el-menu-item-group>
                    <el-menu-item index="3-1" @click="goTo('/consumer')">用户列表</el-menu-item>
                    <el-menu-item index="3-2" @click="goTo('/AddConsumer')">用户添加</el-menu-item>
<!--                    <el-menu-item index="3-3" @click="goTo('/updateConsumer')">用户修改</el-menu-item>-->
                  </el-menu-item-group>
                </el-submenu>

                <el-submenu index="4">
                  <template slot="title">

                    <i class="el-icon-location"></i>
                    <span>订单管理</span>
                  </template>

                  <el-menu-item-group>
                    <el-menu-item index="4-1">选项1</el-menu-item>
                    <el-menu-item index="4-2">选项2</el-menu-item>
                    <el-menu-item index="4-3">选项3</el-menu-item>
                    <el-submenu index="4-4">
                      <template slot="title">选项4</template>
                      <el-menu-item index="4-4-1">选项1</el-menu-item>
                    </el-submenu>
                  </el-menu-item-group>
                </el-submenu>

              </el-menu>
            </el-col>

            <el-col :xs="20" :sm="20" :md="20" :lg="20">
              <!--<div
                style="border: 1px solid #A6A6A6; border-radius:6px; padding:5px; margin:2px; background-color: white">
                <el-breadcrumb separator="/">
                  <el-breadcrumb-item v-for="item in breadcrumbItems">{{item}}</el-breadcrumb-item>
                </el-breadcrumb>
              </div>-->
              <router-view></router-view>
            </el-col>

          </el-row>
        </div>
      </div>

    </div>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>

</template>


<script type="text/ecmascript-6">
  export default {


    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      ShopInfo: function () {
        this.$router.push("/ShopIndex");
      },
      shopInsert: function () {
        this.$router.push("/insertShop")
      },
      goTo(path) {
        this.$router.replace(path);
      },
      reload() {
        this.isRouterAlive = false;
        this.$nextTick(function () {
          this.isRouterAlive = true;
        });
      },
      provide() {
        return {
          reload: this.reload
        }
      }
    }
  }
</script>

<style scoped>
  * {
    margin: 0;
    padding: 0;
    color: #666;
    border: none;
  }

  .biankuang {
    background-color: #ffffff;
  }

</style>
